<template>
  <div class="hight_video_page">
    <div class="container">
      <div class="left">
        <div class="left_box">
          <div class="list_title">列表（{{ leftList.length }}）</div>
          <ul class="list">
            <li
              class="list_item"
              :class="index == idx ? 'hover' : 'list_item'"
              @click="particulars(item.baseId, index)"
              v-for="(item, index) in leftList"
              :key="item.baseId"
            >
              <!-- 打回 -->
              <a-icon v-if="item.state == 0" type="close-circle" />
              <!-- 正在提交 -->
              <a-icon v-if="item.state == 1" type="clock-circle" />
              <!-- 提交成功 -->
              <a-icon v-if="item.state == 2" type="check-circle" />
              <span :title="item.baseName">{{ item.baseName }}</span>
              <a-popconfirm
                placement="bottom"
                title="是否确认删除？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delete1(item.baseId)"
              >
                <a-icon
                  slot="icon"
                  type="question-circle-o"
                  style="color: red"
                />
                <!-- @click="delete1(item.baseId)" -->

                <a-button type="primary" icon="delete"></a-button>
              </a-popconfirm>
            </li>
          </ul>
        </div>
        <div @click="addaward" class="list_add">+</div>
      </div>
      <div class="right_report_box">
        <div class="right_title">
          <span>金鹿高清播出技术质量申报奖</span>
          <a-input
            placeholder="请输入作品名"
            class="input1"
            v-model="baseNametop"
          />
          <div class="btn_wrap">
            <a-popconfirm
              title="是否确认保存？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="save()"
            >
              <a-icon slot="icon" type="question-circle-o" style="color: red" />
              <a-button>保存</a-button>
            </a-popconfirm>
            <a-popconfirm
              title="是否确认提交？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="cmit111()"
            >
              <a-icon slot="icon" type="question-circle-o" style="color: red" />
              <a-button class="mid_btn">提交</a-button>
            </a-popconfirm>

            <a download="myFileName" target="blank" :href="id"
              ><a-button>下载PDF</a-button></a
            >
          </div>
        </div>
        <a-tabs :animated="false" default-active-key="1" @change="ischange">
          <a-tab-pane key="1" tab="申请表格">
            <ReportTable ref="sub" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="附件清单">
            <AffixList
              ref="file"
              :listType2="listType"
              :fileIds2="fileIds"
              :baseId="baseid"
              :states="states"
              @fatherMethod="getlistType"
              @fathersave="savelitm"
            />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <a-modal
      width="75%"
      title="汇总表上传"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      okText="保存"
      cancelText="取消"
      @cancel="handleCancel"
    >
      <div class="tabs">
        <div class="leftboxt">金鹿奖申报总表</div>
        <div class="rightbox">
          <div class="smbox" v-if="filedata.file1 != ''">
            <div>金鹿奖申报总表</div>
            <img
              class="trash"
              src="../../assets/images/垃圾桶.png"
              alt=""
              @click="hzdeletes(1)"
            />
          </div>
          <!-- <img class="jiahao" src="../../assets/images/加号.png" alt="" /> -->
          <a-upload
            name="file"
            :multiple="false"
            :customRequest="uploadImage1"
            :showUploadList="false"
          >
            <a-button>
              <a-icon type="upload" />
            </a-button>
          </a-upload>
        </div>
        <div class="rightboxr" @click="downfile1">
          <div class="xiazai">申报总表模板下载</div>
        </div>
      </div>
      <div class="tabs">
        <div class="leftboxt">金鹿奖推荐汇总表</div>
        <div class="rightbox">
          <div class="smbox" v-if="filedata.file2 != ''">
            <div>金鹿奖推荐汇总表</div>
            <img
              class="trash"
              src="../../assets/images/垃圾桶.png"
              alt=""
              @click="hzdeletes(2)"
            />
          </div>
          <!-- <img class="jiahao" src="../../assets/images/加号.png" alt="" /> -->
          <a-upload
            name="file"
            :multiple="false"
            :customRequest="uploadImage"
            :showUploadList="false"
          >
            <a-button>
              <a-icon type="upload" />
            </a-button>
          </a-upload>
          <!-- <a-progress
            :percent="item3.progress"
            size="small"
            v-if="item3.progress || item3.progress == 100"
          /> -->
        </div>
        <div class="rightboxr" @click="downfile2">
          <div class="xiazai">推荐汇总表模板下载</div>
        </div>
      </div>
      <div class="reminder">
        注：请注意总表信息要与申报信息一致，并盖章上传总表信息
      </div>
    </a-modal>
  </div>
</template>

<script>
import AffixList from "./components/AffixList.vue";
import ReportTable from "./components/ReportTable.vue";
import { handleTree } from "../../utils/handleTree";
let OSS = require("ali-oss"); // 引入ali-oss插件
const client = new OSS({
  region: "oss-cn-beijing", //根据那你的Bucket地点来填写
  accessKeyId: "LTAI4G7UZJyHhESptLXc2zTC", //自己账户的accessKeyId
  accessKeySecret: "1Gq3VyZagk99ZLLoxzjUyS8GQQzydo", //自己账户的accessKeySecret
  bucket: "gdysj", //bucket名字
});
// import ReportTable from "../../components/deerAward/deerDefault.vue";
import {
  getaddOrUpdate2,
  jflist,
  details,
  cmit,
  delete1,
  cmit2,
  listType,
  listCollectTable,
  addcontabel,
  deletecontabel,
} from "../../api/index";
export default {
  name: "highVideoReport",
  components: {
    AffixList,
    ReportTable,
  },
  data() {
    return {
      ModalText: "Content of the modal",
      visible: false,
      confirmLoading: false,
      baseNametop: "",
      leftList: [],
      // affixList: [
      //   // 附件清单列表
      //   {
      //     label: "申请表",
      //     value: "肥东新闻录制技术.pdf",
      //     progress: 30,
      //   },
      //   {
      //     label: "节目素材",
      //     value: "20220306期新闻.MP4",
      //     progress: 100,
      //   },
      // ],
      affixList: [],
      fileIds: [],
      idx: "c",
      id: "",
      isflielist: [],
      listType: [],
      states: "",
      filedata: {},
    };
  },
  mounted() {
    // this.particulars(this.$route.params.baseId, 100000000000000);
    for (let index = 0; index < this.leftList.length; index++) {
      const element = this.leftList[index];
      if (element.baseId == this.$route.params.baseId) {
        this.idx = index;
        console.log(this.idx, "this.idx");
      }
    }
    this.particulars(this.$route.params.baseId, this.idx);
    // if (this.$route.params.baseId) {
    //   for (let index = 0; index < this.leftList.length; index++) {
    //     const element = this.leftList[index];
    //     if (element.baseId == this.$route.params.baseId) {
    //       this.idx = index;
    //     }
    //   }
    //   this.baseid = this.$route.params.baseId;
    //   details(this.$route.params.baseId).then((res) => {
    //     if (this.$refs.file == undefined) {
    //       this.affixList = res.data.fileList;
    //       for (let index = 0; index < res.data.fileList.length; index++) {
    //         const element = res.data.fileList[index];
    //         this.fileIds.push(element.id);
    //       }
    //     } else {
    //       this.$refs.file.affixList = res.data.fileList;
    //       for (let index = 0; index < res.data.fileList.length; index++) {
    //         const element = res.data.fileList[index];
    //         this.$refs.file.fileIds.push(element.id);
    //       }
    //     }

    //     res.data.proGoldSail.proGoldSailRecord.sbjxlb = Number(
    //       res.data.proGoldSail.proGoldSailRecord.sbjxlb
    //     );
    //     this.baseName = res.data.baseName;
    //     this.$refs.table.reportData = res.data.proGoldSail.proGoldSailRecord;
    //   });
    // }
    this.getlistType();
    this.getfjlist();
    this.getjflist();
    if (this.id == "") {
      this.id =
        "https://www.ahwanyun.cn/FR/ReportServer?reportlet=gdy/gdy_jlj_lz_sqb.cpt";
    }
  },
  methods: {
    downfile2() {
      var index = this.filedata.file2.lastIndexOf("\?");
      var url = this.filedata.file2.substring(0,index);
      console.log(url)
      window.location.href = url;
    },
    downfile1() {
      var index = this.filedata.file1.lastIndexOf("\?");
      var url = this.filedata.file1.substring(0,index);
      console.log(url)
      window.location.href = url;
    },
    getfjlist() {
      console.log(
        JSON.parse(sessionStorage.getItem("userInfo")).depts[0].deptId
      );

      listCollectTable({
        prizeType: 3,
        deptId: JSON.parse(sessionStorage.getItem("userInfo")).depts[0].deptId,
      }).then((res) => {
        console.log(res, "附件返回");
        if (res.data.length != 0) {
          this.filedata = res.data[0];
        } else {
          this.filedata = {
            file1: "",
            file2: "",
          };
        }
      });
    },
    hzdeletes(id) {
      console.log(this.filedata.id);
      if (this.filedata.id == undefined) {
        if (id == 1) {
          this.filedata.file1 = "";
        } else {
          this.filedata.file2 = "";
        }
      } else {
        if (id == 1) {
          deletecontabel({
            id: this.filedata.id,
            file1: "",
          }).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getfjlist();
            }
          });
        } else {
          deletecontabel({
            id: this.filedata.id,
            file2: "",
          }).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getfjlist();
            }
          });
        }
      }
    },
    // 上传头像
    async uploadImage(file, index) {
      console.log(file);
      let files = file.file;
      const point = files.name.lastIndexOf(".");
      let suffix = files.name.substr(point);
      let fileName = files.name.substr(0, point);
      let date = Date.parse(new Date());
      let fileNames = `_${date}${suffix}`;
      var obj = {
        suffix: "素材",
        fileName: file.file.name,
        progress: 0,
      };
      // this.affixList.push(obj);
      // this.listType2[this.index1].children[this.index2].children.push(obj);
      let result = await client.multipartUpload(
        "gdysj" + fileNames,
        file.file,
        {
          //   headers: {
          //     "Content-Disposition": "inline",
          //     "Content-Type": this.file.type, //注意：根据图片或者文件的后缀来设置，我试验用的‘.png’的图片，具体为什么下文解释
          //   },
          progress: (p, checkpoint) => {
            // this.tempCheckpoint = checkpoint;
            // this.uploadId = checkpoint.uploadId;
            // this.uploadName = checkpoint.name;
            let e = {};
            e.percent = p * 100;
            // file.onProgress(e);
            // this.affixList[this.affixList.length - 1].progress =
            //   e.percent.toFixed();
            // this.listType2[this.index1].children[this.index2].children[
            //   this.listType2[this.index1].children[this.index2].children
            //     .length - 1
            // ].progress = e.percent.toFixed();
            // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
          },
          meta: { year: 2020, people: "dev" },
          // mime: this.file.type,
        }
      );
      console.log(result);
      // this.file1.url = result.res.requestUrls[0];
      this.filedata.file2 = result.res.requestUrls[0];
    },
    // 上传头像
    async uploadImage1(file, index) {
      console.log(file);
      let files = file.file;
      const point = files.name.lastIndexOf(".");
      let suffix = files.name.substr(point);
      let fileName = files.name.substr(0, point);
      let date = Date.parse(new Date());
      let fileNames = `_${date}${suffix}`;
      var obj = {
        suffix: "素材",
        fileName: file.file.name,
        progress: 0,
      };
      // this.affixList.push(obj);
      // this.listType2[this.index1].children[this.index2].children.push(obj);
      let result = await client.multipartUpload(
        "gdysj" + fileNames,
        file.file,
        {
          //   headers: {
          //     "Content-Disposition": "inline",
          //     "Content-Type": this.file.type, //注意：根据图片或者文件的后缀来设置，我试验用的‘.png’的图片，具体为什么下文解释
          //   },
          progress: (p, checkpoint) => {
            // this.tempCheckpoint = checkpoint;
            // this.uploadId = checkpoint.uploadId;
            // this.uploadName = checkpoint.name;
            let e = {};
            e.percent = p * 100;
            // file.onProgress(e);
            // this.affixList[this.affixList.length - 1].progress =
            //   e.percent.toFixed();
            // this.listType2[this.index1].children[this.index2].children[
            //   this.listType2[this.index1].children[this.index2].children
            //     .length - 1
            // ].progress = e.percent.toFixed();
            // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
          },
          meta: { year: 2020, people: "dev" },
          // mime: this.file.type,
        }
      );
      console.log(result);
      // this.file2.url = result.res.requestUrls[0];
      this.filedata.file1 = result.res.requestUrls[0];
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      // this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      // setTimeout(() => {
      //   this.visible = false;
      //   this.confirmLoading = false;
      // }, 2000);
      if (this.filedata.id) {
        deletecontabel({
          id: this.filedata.id,
          file1: this.filedata.file1,
          file2: this.filedata.file2,
        }).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("保存成功");
            this.confirmLoading = false;
            this.visible = false;
            this.getfjlist();
          }
        });
      } else {
        addcontabel({
          prizeType: 3,
          deptId: JSON.parse(sessionStorage.getItem("userInfo")).depts[0]
            .deptId,
          file1: this.filedata.file1,
          file2: this.filedata.file2,
        }).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("保存成功");
            this.confirmLoading = false;
            this.visible = false;
          }
        });
      }
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    particulars(e, index) {
      console.log(e, index);
      this.idx = index;
      let chil = this.$refs.sub;
      this.baseid = e;
      this.id =
        " https://www.ahwanyun.cn/FR/ReportServer?reportlet=gdy/gdy_jlj_bc_sqb.cpt&base_id=" +
        e;
      this.fileIds = [];
      if (this.$refs.file != undefined) {
        this.$refs.file.fileIds = [];
      } else {
        this.fileIds = [];
      }
      console.log(e, "sadasdasd");
      details(e).then((res) => {
        console.log(res, "这是总的附件列表");
        this.isflielist = res.data.fileList;
        for (let index = 0; index < res.data.fileList.length; index++) {
          const element = res.data.fileList[index];
          this.fileIds.push(element.id);
        }
        this.getlistType(e);
        chil.proGoldDeerPlay2 = res.data.proGoldDeer.proGoldDeerPlay;
        this.baseNametop = res.data.baseName;
        this.baseId = res.data.baseId;
        this.states = res.data.state;
        chil.gain();
      });
    },
    getlistType() {
      listType({
        prizeType: 5,
      }).then((res) => {
        console.log(res, "附件列表");
        console.log(handleTree(res.data, "id"), "附件数据");
        this.listType = handleTree(res.data, "id");
        if (this.isflielist.length != 0) {
          for (let index1 = 0; index1 < this.listType.length; index1++) {
            // const element = this.listType[index];
            for (
              let index2 = 0;
              index2 < this.listType[index1].children.length;
              index2++
            ) {
              // const element = this.listType[index].children[index];
              for (let index3 = 0; index3 < this.isflielist.length; index3++) {
                // const element = this.affixList[index];
                if (
                  this.listType[index1].children[index2].id ==
                  this.isflielist[index3].typeId
                ) {
                  this.listType[index1].children[index2].children.push(
                    this.isflielist[index3]
                  );
                }
              }
            }
          }
        }

        // this.$refs.file.listType = this.listType
        console.log(this.listType, "listTypelistTypelistType");
      });
    },
    cmit111() {
      // this.getfjlist();
      listCollectTable({
        prizeType: 3,
        deptId: JSON.parse(sessionStorage.getItem("userInfo")).depts[0].deptId,
      }).then((res) => {
        console.log(res, "附件返回");
        if (res.data.length != 0) {
          this.filedata = res.data[0];
        } else {
          this.filedata = {
            file1: "",
            file2: "",
          };
        }

        if (this.filedata.file1 == "" || this.filedata.file2 == "") {
          // this.$message.error("请");
          this.visible = true;
        } else {
          // this.visible = true;
          if (this.baseNametop === "") {
            this.$message.error("请填写作品名");
            return;
          }
          var arr = [];
          if (this.$refs.file == undefined) {
            arr = this.fileIds;
          } else {
            arr = this.$refs.file.fileIds;
          }
          let chil = this.$refs.sub;
          let chil2 = this.$refs.file;

          var BaseInfo = {
            proGoldDeer: {
              proGoldDeerPlay: {
                ...chil.proGoldDeerPlay,
              },
            },
            threeTypeId: "2",
            twoTypeId: "2",
            prizeTypeId: this.$route.query.prizeTypeId,
            baseName: this.baseNametop,
            fileIds: arr,
            oneTypeId: "2",
            baseId: this.baseId || "",
          };
          cmit2(BaseInfo).then((res) => {
            if (res.code === 500) {
              this.$message.error(res.msg);
            } else {
              this.$message.success("保存成功");
              chil.empty();
              this.baseNametop = "";
              this.baseId = "";
              this.id =
                "https://www.ahwanyun.cn/FR/ReportServer?reportlet=gdy/gdy_jlj_lz_sqb.cpt";
              // chil2.affixList = [];
              this.addaward();
            }
            this.getjflist();
          });
        }
        console.log(this.filedata);
      });
    },
    delete1(e) {
      delete1(e).then((res) => {
        if (res.code === 500) {
          this.$message.error(res.msg);
        } else {
          this.$message.success(res.msg);
        }
        this.getjflist();
        this.addaward();
      });
    },
    getjflist() {
      var jflist1 = {
        oneTypeld: 2,
        twoTypeId: 2,
        threeTypeId: 2,
        prizeTypeId: this.$route.query.prizeTypeId,
      };
      jflist(jflist1).then((res) => {
        this.leftList = res.rows;
      });
    },
    ischange(e) {
      // this.$refs.file.getfilelist()
      if (this.$refs.file == undefined) {
        setTimeout(() => {
          this.$refs.file.fileIds = this.fileIds;
          this.$refs.file.affixList = this.affixList;
        }, 200);
      }
    },
    addaward() {
      let chil = this.$refs.sub;
      chil.empty();
      this.baseNametop = "";
      this.baseId = "";
      this.idx = "c";
      this.id =
        "https://www.ahwanyun.cn/FR/ReportServer?reportlet=gdy/gdy_jlj_lz_sqb.cpt";
      (this.$refs.file.fileIds = []), (this.$refs.file.affixList = []);
      // this.listType = []
      this.isflielist = [];
      this.getlistType();
    },
    save() {
      if (this.baseNametop === "") {
        this.$message.error("请填写作品名");
        return;
      }
      var arr = [];
      // if (this.$refs.file == undefined) {
      //   arr = this.fileIds;
      // } else {
      //   arr = this.$refs.file.fileIds;
      // }
      arr = this.fileIds;
      let chil = this.$refs.sub;
      let chil2 = this.$refs.file;
      chil.gain();
      var BaseInfo = {
        proGoldDeer: {
          proGoldDeerPlay: {
            ...chil.proGoldDeerPlay,
          },
        },
        threeTypeId: "2",
        twoTypeId: "2",
        prizeTypeId: this.$route.query.prizeTypeId,
        baseName: this.baseNametop,
        fileIds: arr,
        oneTypeId: "2",
        baseId: this.baseId || "",
      };
      getaddOrUpdate2(BaseInfo).then((res) => {
        if (res.code === 500) {
          this.$message.error(res.msg);
        } else {
          this.$message.success("保存成功");
          // this.baseId = res.msg;
          chil.empty();
          this.baseNametop = "";
          this.baseId = "";
          this.id =
            "https://www.ahwanyun.cn/FR/ReportServer?reportlet=gdy/gdy_jlj_lz_sqb.cpt";
          // chil2.affixList = [];
          this.addaward();
        }
        this.getjflist();
      });
    },
    savelitm() {
      if (this.baseNametop === "") {
        this.$message.error("请填写作品名");
        return;
      }
      var arr = [];
      // if (this.$refs.file == undefined) {
      //   arr = this.fileIds;
      // } else {
      //   arr = this.$refs.file.fileIds;
      // }
      arr = this.fileIds;
      let chil = this.$refs.sub;
      let chil2 = this.$refs.file;
      chil.gain();
      var BaseInfo = {
        proGoldDeer: {
          proGoldDeerPlay: {
            ...chil.proGoldDeerPlay,
          },
        },
        threeTypeId: "2",
        twoTypeId: "2",
        prizeTypeId: this.$route.query.prizeTypeId,
        baseName: this.baseNametop,
        fileIds: arr,
        oneTypeId: "2",
        baseId: this.baseId || "",
      };
      getaddOrUpdate2(BaseInfo).then((res) => {
        if (res.code === 500) {
          this.$message.error(res.msg);
        } else {
          this.$message.success("保存成功");
          // this.baseId = res.msg;
          // chil.empty();
          // this.baseNametop = "";
          // this.baseId = "";
          // this.id =
          //   "https://www.ahwanyun.cn/FR/ReportServer?reportlet=gdy/gdy_jlj_lz_sqb.cpt";
          // // chil2.affixList = [];
          // this.addaward();
        }
        this.getjflist();
      });
    },
  },
};
</script>

<style scoped>
.hight_video_page {
  width: 100%;
  height: 100%;
  color: #444;
  background: #fff;
}
.container {
  max-width: 1400px;
  height: 100%;
  margin: auto;
  padding: 40px;
  display: flex;
}
.left_box {
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  color: #fff;
  height: 350px;
  overflow-y: auto;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: #4facfa;
}

.list_title {
  background: #099ee4;
  padding: 8px 12px;
}
.list {
  color: #444;
}
.list_add {
  text-align: center;
  background: #099ee4;
  padding: 4px 12px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
.list_item {
  border-bottom: 1px solid #ccc;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.hover {
  border-bottom: 1px solid #ccc;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #099ee4;
  opacity: 0.5;
  color: #fff;
}
.list_item span {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
}
.list li:hover {
  background: #099ee4;
  opacity: 0.5;
  color: #fff;
}
.list li:active {
  background: #099ee4;
  opacity: 0.5;
  color: #ccc;
}
.right_report_box {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-left: 20px;
  padding: 26px 16px;
  overflow: auto;
}
.list_add:hover {
  opacity: 0.7;
}
.right_title {
  padding-bottom: 16px;
  font-weight: bold;
  color: #222;
  font-size: 16px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input1 {
  width: 200px;
}
.mid_btn {
  margin: 0 16px;
}
.right_report_box >>> .ant-tabs-bar {
  border: 0;
}

.rightboxr {
  text-align: center;
  line-height: 60px;
  width: 25%;
  border-left: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.tabs {
  display: flex;
  border: 1px solid #ccc;
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
}
.xiazai {
  height: 40px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  padding: 5px;
  box-sizing: border-box;
}
.jiahao {
  width: 40px;
  height: 40px;
}
.leftboxt {
  text-align: center;
  /* line-height: 60px; */
  display: flex;
  align-items: center;
  width: 20%;
  justify-content: space-around;
  border-right: 1px solid #ccc;
}
.rightbox {
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 80%;
  flex-wrap: wrap;
}
.trash {
  width: 20px;
  height: 25px;
  cursor: pointer;
}
.smbox {
  height: 40px;
  width: 200px;
  border: 1px solid #ccc;
  align-items: center;
  justify-content: space-around;
  display: flex;
  margin-right: 20px;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 10px;
  box-sizing: border-box;
}
.reminder {
  margin-top: 30px;
  width: 100%;
  height: 32px;
  background-color: rgba(255, 235, 0, 0.85);
  border-color: rgb(187, 187, 187);
  border-width: 1px;
  border-style: solid;
  color: rgb(230, 19, 19);
  font-size: 14px;
  padding: 0px;
  text-align: left;
  line-height: 32px;
  font-weight: normal;
  font-style: normal;
  text-align: center;
}
</style>
